
import Vue from 'vue'
import VueRouter from 'vue-router'
// vue插件加载  vue.use(插件名,{插件配置项})

// 1 准备组件
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import Cart from '../views/Cart.vue'
import Concat from '../views/Concat.vue'
import Hezuo from '../views/Hezuo.vue'
Vue.use(VueRouter)

const routes = [
  // 重定向
  {
    path: "/",
    redirect: "/home"
  },
  {
    path: "/home",
    name: "home",
    component: Home
  },
  {
    path: "/about",
    name: "about",
    component: About,
    // 子路由的配置
    children: [
      {
        path: "concat",
        name: "concat",
        alias: "lianxi",//别名
        component: Concat
      },
      {
        path: "hezuo",
        name: "hezuo",
        component: Hezuo
      }
    ]
  },
  {
    // 路由配置项中 /:参数名  必须传参数
    // ? 可忽略的参数
    path: "/cart/:pid?",
    name: "cart",
    component: Cart
  },
  {
    path: "/my",
    name: "my",
    // 组件的懒加载  组件的按需加载 提高性能
    // 可以解决 webapp 首屏加载时间过长问题
    component: () => import('../views/My.vue')
  }
]

const router = new VueRouter({
  // hash模式  history 历史模式的区别
  // 最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的
  // hash —— 即地址栏 URL 中的 # 符号
  // 它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，
  // 对后端完全没有影响，因此改变 hash 不会重新加载页面。   
  // history —— 利用了 HTML5 History Interface 中新增的 pushState () 和 replaceState () 方法。
  // 可以产生浏览器的历史纪录  可以前进后退
  // 虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。
  mode: "history",
  routes
})

export default router
